<template>
  <div class="shopcar-container">
    <div class="good-list">
      <div class="mui-card"  v-for="item in goodsArr" :key="item.id">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						
            <mt-switch v-model="$store.getters.getGoodsSelected[item.id]" @change="selectedChanged(item.id,$store.getters.getGoodsSelected[item.id])"></mt-switch>
            <img src="../../images/menu3.png" alt="">
            <div class="info">
              <h1>{{ item.title }}</h1>
              <p>
                <span class="price">￥{{item.price}}</span>
                <numbox :initcount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numbox>
                <a href="#" @click.prevent="remove(item.id)">删除</a>
              </p>
            </div>
					</div>
				</div>
			</div>
    </div>
    <!-- 结算 -->
    <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner jiesuan">
						<div class="left">
              <p>总计（不含运费）</p>
              <p>已选商品 <span class="red">{{$store.getters.getGoodsCountAndNmount.count}}</span> 件，总价￥<span class="red">{{$store.getters.getGoodsCountAndNmount.amount}}</span>元</p>
            </div>
            <mt-button type="danger">结算</mt-button>
					</div>
          
				</div>
			</div>
  </div>
</template>

<script>
import numbox from "../subcomponents/shopcar_numbox.vue"

export default {
  data(){
    return { goodsArr:[] }
  },
  created(){
    this.getGoodsList()
  },
  methods:{
    getGoodsList(){
      this.goodsArr = this.$store.state.car
      // this.$store.state.car.forEach(item => idArr.push(item.id));

    },
    remove(id){
      this.$store.commit("removeFromCar",id)
    },
    selectedChanged(id,val){
      // console.log(id+"======"+val);
      this.$store.commit("updateGoodsSelected",{id,selected:val})
    }
  },
  components:{
    numbox
  }
}
</script>

<style lang="scss" scoped>
.shopcar-container{
  background-color: #eee;
  overflow: hidden;
  .good-list{
    .mui-card-content-inner{
      display: flex;
      align-items: center;
    }
    img{
      width: 55px;
      height: 55px;
    }
    
    h1{
      font-size: 14px;
    }
    .info{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .price{
        color: red;
        font-weight: bold;
      }
      a{
        margin: 0;
        font-size: 12px;
      }
    }
    
  }
  .jiesuan{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .red{
      color: red;
      font-size: 14px;
      font-weight: bold;
    }
  }
}
</style>
